

<template>
<div>
  <div class="input-bottom-dialogue">
    <!--            头像-->
    <div style="margin-right: 14px;">
      <img style="width: 60px;height: 60px;" src="@/assets/images/notLoggedIn/user_image.png"></img>
    </div>
    <!--            右侧对话框-->
    <div class="input-bottom-dialogue-container">
      <div class="input-bottom-dialogue-container-box">

        <div class="timer">
          <div class="input-tip-title entourage-list">
            <div style="display: flex;align-items:  center; ">
              <div class="tip">
                <img style="width: 14px;height: 14px;margin-left: 4px" src="@/assets/images/notLoggedIn/home_icon.png">
              </div>
              <div class="title">关于社交媒体动态智能生成游后记录,您还需要明确具体内容:</div>
            </div>
          </div>
          <div class="category-list">
            <div @click="navigationClick(item,index)"
                 :class="currentNavigation===index?'active-category-list-item':'category-list-item'"
                 v-for="(item,index) in navigationList">
              <div class="category-list-item-title">
                {{item.name}}
              </div>
            </div>
          </div>
        </div>

      </div>


    </div>

  </div>
  <div class="culture-bottom-dialogue" v-if="currentNavigation>-1">
    <!--            头像-->
    <div style="margin-right: 14px;">
      <img style="width: 60px;height: 60px;" src="@/assets/images/notLoggedIn/user_image.png"></img>
    </div>
    <!--            右侧对话框-->
    <div class="input-bottom-dialogue-container">
      <div class="input-bottom-dialogue-container-box">
        <div class="culture-ai-title">
          <div class="tip">
            <img style="width: 14px;height: 14px;margin-left: 4px" src="@/assets/images/notLoggedIn/home_icon.png">
          </div>
          <div class="title">关于{{currentSpecificTitle}}游后记录,您还需要明确具体内容:</div>
        </div>
        <div class="culture-AI" v-show="currentNavigation===SOCIAL_MEDIA.PICTURE_BEAUTIFICATION">
          <div class="culture-left">
            <div>
              <div class="left-container" >
                <div class="left-container-box">
                  <el-upload

                      :limit="1"
                      :show-file-list="false"
                      :on-success="handleSuccess"
                      :action="uploadUrl"
                      :headers="headers"
                  >

                    <div v-show="dialogImageUrl">
                      <img   style="width: 100%;height: 150px;overflow: auto" :src="dialogImageUrl">
                    </div>
                    <div v-show="!dialogImageUrl">
                      <img   style="width: 42px;height: 42px" src="@/assets/images/notLoggedIn/Plus@2x.png">
                    </div>
                    <div>
                    </div>
                    <div v-if="!dialogImageUrl"  class="right-container-title">上传</div>
                  </el-upload>


                </div>
              </div>
            </div>
          </div>
          <div class="culture-center" @click="intelligentGeneration(SOCIAL_MEDIA.PICTURE_BEAUTIFICATION)">
            <div class="culture-container">
              <div class="culture-container-title">
                智能生成
              </div>



            </div>
          </div>
          <div class="culture-right">
            <div>
              <div class="culture-container-video">
                <div  id="audio-player" v-show="isShowImage">
                  <img id="image" style="width: 100%;height: 210px;" >
                </div>
                <div>

                </div>
              </div>
            </div>
          </div>

        </div>
        <div class="culture-AI" v-show="currentNavigation===SOCIAL_MEDIA.PICTURE_TEXT">
          <div class="culture-left">
<!--              <div class="culture-container-title-font">-->
<!--                  <div class="culture-container-video">-->
<!--                    <div   v-show="isShowImage">-->
<!--                      <img id="imageTwo" style="width: 100%;height: 210px;" >-->
<!--                    </div>-->
<!--                  </div>-->
<!--              </div>-->
            <div>
              <div class="culture-container-video">
                <div  id="audio-player" v-show="isShowImage">
                  <img id="imageTwo" style="width: 100%;height: 150px;overflow: auto" >
                </div>
                <div>

                </div>
              </div>
            </div>
          </div>
          <div class="culture-center" @click="intelligentGeneration(SOCIAL_MEDIA.PICTURE_TEXT)">
            <div class="culture-container">
              <div class="culture-container-title">
                智能生成
              </div>



            </div>
          </div>
          <div class="culture-right">
            <div>
              <div class="culture-container-video">
                <div>

                  生成文案中...
                </div>
                <div>

                </div>
              </div>
            </div>
          </div>

        </div>
        <div class="culture-AI" v-show="currentNavigation===SOCIAL_MEDIA.PICTURE_VIDEO">
          <div class="culture-left">
            <div>
              <div class="culture-container-title">文字介绍</div>
              <div class="culture-container">
              </div>
            </div>
          </div>
          <div class="culture-center" @click="intelligentGeneration(SOCIAL_MEDIA.PICTURE_VIDEO)">
            <div class="culture-container">
              <div class="culture-container-title">
                智能生成
              </div>



            </div>
          </div>
          <div class="culture-right">
            <div>
              <div class="culture-container-video">
                <div @click="playAudio" id="audio-player">

                  <img style="width: 100px;height: 100px" src="@/assets/images/notLoggedIn/play@2x.png">
                </div>
                <div>

                </div>
              </div>
            </div>
          </div>

        </div>



      </div>


    </div>
  </div>
  <el-dialog v-model="dialogVisible" @close="handleClose" width="284px" >
    <template #title>
      <div class="tip-title">
        选择模式
      </div>

    </template>
    <div class="tip-content">
      <div class="tip-content-container">
        <div @click="oneClickClick(item,index)" class="tip-content-item" v-for="(item,index) in oneClickList">
          <div :class="item.isSelected?'active-tip-content-item-title':'tip-content-item-title'" class="tip-content-item-title">
            {{item.name}}
          </div>
        </div>

      </div>
    </div>
    <template #footer>
  <div class="button-groups">
    <div class="button-default" @click="handleClose">取 消</div>
    <div class="button-default button-right" @click="handleQuery">确 定</div>
  </div>
    </template>


  </el-dialog>
</div>
</template>
<script setup>
import api from "@/service/TouristHomepage";
import {onMounted, reactive, ref, watch} from "vue";
import {getHeaders} from "@/utils/compUtils";
import {SOCIAL_MEDIA} from "@/utils/consts";
import {useTouristHomepageStore} from "@/store/touristHomepage";
import {useSystemStore} from "@/store/system";
import {uploadUrl} from "@/hook/setting";
const $systemStore = useSystemStore();
const token = $systemStore.token;
const headers = getHeaders();
const currentNavigation=ref(-1);
const navigationList=ref([
  {
    id:'1',
    name:'游记图片美化智能生成',
    price:'10',
    distance:'10',
    isSelected:false,
  },
  {
    id:'2',
    name:'游记图片文字智能生成',
    price:'10',
    distance:'10',
    isSelected:false,
  },
  {
    id:'3',
    name:'社交媒体动态智能生成',
    price:'10',
    distance:'10',
    isSelected:false,
  },
])
const oneClickList=ref([
  {
    id:'1',
    name:'一键美颜',
    price:'10',
    distance:'10',
    isSelected:false,
  },
  {
    id:'2',
    name:'一键滤镜',
    price:'10',
    distance:'10',
    isSelected:false,
  },
  {
    id:'3',
    name:'一键清晰',
    price:'10',
    distance:'10',
    isSelected:false,
  },
])
const currentSpecificCategories=ref([])
const currentSpecificTitle=ref('');
function navigationClick(data,index){
  currentNavigation.value=index;
  currentSpecificCategories.value=data.children;
  currentSpecificTitle.value=data.name;
  isNavigationShow.value=true;
  currentServiceComplaints.value=-1;
  useTouristHomepageStore().setTouristClearStatus(false)
}
const isNavigationShow=ref(false);
const currentServiceComplaints=ref(-1)
function handleClose(){
  dialogVisible.value=false;
  currentOneClick.value=-1;
  for(let i=0;i<oneClickList.value.length;i++){
    oneClickList.value[i].isSelected=false;
  }
}
let imageBlob = ref(null);
let imageBlobTwo = ref(null);
const isShowImage=ref(false);
// 保存 图片流数据
const selectedFileBlob = ref(null);
 function handleQuery(){
   let beautifyType=oneClickList.value.filter(item=>item.isSelected);
   console.log("图片美化类型",beautifyType)
   selectedFile.value['beautifyType']=beautifyType.map(item=>item.name).join(',')
   console.log("selectedFile",selectedFile.value)
 api.imageBeautificationUrl(selectedFile.value).then(response=>{
   if(response){
     console.log("图片美化成功", response)
     // 关闭对话框
     handleClose();
     isShowImage.value=true;
     selectedFileBlob.value=response.data;
     imageBlob.value=document.getElementById("image");
     imageBlobTwo.value=document.getElementById("imageTwo");
     imageBlob.value.src = response.data.fileUrl;
     imageBlobTwo.value.src = response.data.fileUrl;
   }
 })


}
//
const textFile = ref('');
// 将selectedFileBlob转为formData数据传输给后端
function handleUpload() {
 api.getTextDescriptionByImageUrl(selectedFileBlob.value).then(response => {
   console.log( "图文转----",response.data)
   if(response.data){
     textFile.value=response.data.answer;
     console.log("textFile",textFile.value)
   }
 })

}
const currentOneClick=ref(-1);
function oneClickClick(data,index){
  currentOneClick.value=index;
  data.isSelected=!data.isSelected;

}
// 监听useTouristHomepageStore().touristClearStatus
watch(() => useTouristHomepageStore().touristClearStatus, () => {
  if(useTouristHomepageStore().touristClearStatus){
    currentNavigation.value=-1;

  }
})
let dialogVisible=ref(false);

function intelligentGeneration(type){
  if(type===SOCIAL_MEDIA.PICTURE_BEAUTIFICATION){
    dialogVisible.value=true;
  }else if(type===SOCIAL_MEDIA.PICTURE_TEXT){
  //   文字智能生成
    handleUpload();

  }else if(type===SOCIAL_MEDIA.PICTURE_VIDEO){
    let prams={
      image:'',
      prompt:''
    }
    api.getVideoDescriptionByImageAndText(prams).then((res) => {})

  }

}
const selectedFile=ref(null)
function handleSuccess(response, file, fileList) {
  console.log("response",response);
  dialogImageUrl.value = response.data.fileUrl;
  response.data.beautifyType='';
  selectedFile.value=response.data;
}
const dialogImageUrl=ref('')

</script>
<style scoped lang="scss">
@import "@/assets/main.scss";
//旅游路线规划
.input-bottom-dialogue{
  display: flex;
  margin: 20px 0;
  .input-bottom-dialogue-container{
    overflow: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 106px;
    background: #EDDDCD;
    border-radius: 10px 10px 10px 10px;
    width: calc(100% - 20px);
    .input-bottom-dialogue-container-box{
      width: calc(100% - 40px);
      height: calc(100% - 40px);
      .timer{
        border-bottom: 1px solid #EBD7C5;
        .entourage-list{
          justify-content: space-between;
          width:100%;
        }
        .input-tip-title{
          display: flex;
          align-items: center;
          margin-bottom: 10px;
          .title{
            height: 16px;
            font-family: DingliesongtypefaceRegular;
            font-weight: 400;
            font-size: 16px;
            color: #9B6548;
            text-align: left;
            font-style: normal;
            text-transform: none;
          }
        }
        .category-list{
          display: flex;
          margin-top: 16px;
          //  换行
          flex-wrap: wrap;
          margin-bottom: 10px;
          .category-list-item{
            cursor: pointer;
            margin-left: 8px;
            font-weight: 400;
            font-size: 14px;
            color: #9B6548;
            text-align: left;
            font-style: normal;
            text-transform: none;
            font-family: DingliesongtypefaceRegular;
            height: 22px;
            background: #F5ECE2;
            border-radius: 6px 6px 6px 6px;
            line-height: 22px;
            .category-list-item-title{
              padding: 0 5px;
            }
          }
          .active-category-list-item{
            cursor: pointer;
            margin-left: 8px;
            font-weight: 400;
            font-size: 14px;
            color: #FFFFFF;
            text-align: left;
            font-style: normal;
            text-transform: none;
            font-family: DingliesongtypefaceRegular;
            height: 22px;
            background: #9B6548;
            border-radius: 6px 6px 6px 6px;
            line-height: 22px;
            .category-list-item-title{
              padding: 0 5px;
            }
          }


        }
      }
      .culture-ai-title{
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        .title{
          width: 68px;
          height: 16px;
          font-family: DingliesongtypefaceRegular;
          font-weight: 400;
          font-size: 16px;
          color: #9B6548;
          text-align: left;
          font-style: normal;
          text-transform: none;
        }
      }
      .culture-AI{
        height: 210px;
        display: flex;
        .culture-left{
          width: 100%;
          height: 100%;
          background-image: url("@/assets/images/notLoggedIn/frame@2x.png");
          background-repeat: no-repeat;
          background-size: 100% 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          overflow: auto;
          .culture-container-title{
            font-family: DingliesongtypefaceRegular;
            font-weight: 400;
            font-size: 16px;
            color: #9B6548;
            text-align: left;
            font-style: normal;
            text-transform: none;
            margin-left: 20px;
            margin-bottom: 10px;
            .culture-container-video{
              display: flex;
              align-items: center;
              justify-content: center;
              width: 483px;
              height: 144px;
              font-weight: 400;
              font-size: 14px;
              color: #9B6548;
              line-height: 24px;
              text-align: left;
              font-style: normal;
              text-transform: none;
              overflow: auto;
            }
          }

          .culture-container{
            width: 483px;
            height: 144px;
            font-weight: 400;
            font-size: 14px;
            color: #9B6548;
            line-height: 24px;
            text-align: left;
            font-style: normal;
            text-transform: none;
            overflow: auto;
          }

        }
        .culture-right{
          margin-left: 40px;
          width: 100%;
          height: 100%;
          background-image: url("@/assets/images/notLoggedIn/frame@2x.png");
          background-repeat: no-repeat;
          background-size: 100% 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          .culture-container-title{
            font-family: DingliesongtypefaceRegular;
            font-weight: 400;
            font-size: 16px;
            color: #9B6548;
            text-align: left;
            font-style: normal;
            text-transform: none;
            margin-left: 20px;
            margin-bottom: 10px;
          }
          .culture-container-video{
            display: flex;
            align-items: center;
            justify-content: center;
            width: 483px;
            height: 144px;
            font-weight: 400;
            font-size: 14px;
            color: #9B6548;
            line-height: 24px;
            text-align: left;
            font-style: normal;
            text-transform: none;
            overflow: auto;
          }
        }
      }

    }

  }
}
//  旅游路线规划
.specifics{
  margin-top: 20px;
}
.culture-bottom-dialogue{
  display: flex;
  margin: 20px 0;
  .input-bottom-dialogue-container{
    overflow: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 286px;
    background: #EDDDCD;
    border-radius: 10px 10px 10px 10px;
    width: calc(100% - 20px);
    .input-bottom-dialogue-container-box{
      width: calc(100% - 40px);
      height: calc(100% - 40px);
      .timer{
        border-bottom: 1px solid #EBD7C5;
        .entourage-list{
          justify-content: space-between;
          width:100%;
        }
        .input-tip-title{
          display: flex;
          align-items: center;
          margin-bottom: 10px;
          .title{
            height: 16px;
            font-family: DingliesongtypefaceRegular;
            font-weight: 400;
            font-size: 16px;
            color: #9B6548;
            text-align: left;
            font-style: normal;
            text-transform: none;
          }
        }
        .category-list{
          display: flex;
          margin-top: 16px;
          //  换行
          flex-wrap: wrap;
          margin-bottom: 10px;
          .category-list-item{
            cursor: pointer;
            margin-left: 8px;
            font-weight: 400;
            font-size: 14px;
            color: #9B6548;
            text-align: left;
            font-style: normal;
            text-transform: none;
            font-family: DingliesongtypefaceRegular;
            height: 22px;
            background: #F5ECE2;
            border-radius: 6px 6px 6px 6px;
            line-height: 22px;
            .category-list-item-title{
              padding: 0 5px;
            }
          }
          .active-category-list-item{
            cursor: pointer;
            margin-left: 8px;
            font-weight: 400;
            font-size: 14px;
            color: #FFFFFF;
            text-align: left;
            font-style: normal;
            text-transform: none;
            font-family: DingliesongtypefaceRegular;
            height: 22px;
            background: #9B6548;
            border-radius: 6px 6px 6px 6px;
            line-height: 22px;
            .category-list-item-title{
              padding: 0 5px;
            }
          }


        }
      }
      .culture-ai-title{
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        .title{
          height: 16px;
          font-family: DingliesongtypefaceRegular;
          font-weight: 400;
          font-size: 16px;
          color: #9B6548;
          text-align: left;
          font-style: normal;
          text-transform: none;
        }
      }
      .culture-AI{
        height: 210px;
        display: flex;
        justify-content: space-between;
        .culture-left{
          width: 499px;
          height: 100%;
          background-image: url("@/assets/images/notLoggedIn/frame@2x.png");
          background-repeat: no-repeat;
          background-size: 100% 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          .culture-container-title{
            font-family: DingliesongtypefaceRegular;
            font-weight: 400;
            font-size: 16px;
            color: #9B6548;
            text-align: left;
            font-style: normal;
            text-transform: none;
            margin-left: 20px;
            margin-bottom: 10px;
          }
          .culture-container-title-font{
            width: 100%;
            height: 100%;


            .culture-container-video{
              display: flex;
              align-items: center;
              justify-content: center;
              width: 483px;
              height: 144px;
              font-weight: 400;
              font-size: 14px;
              color: #9B6548;
              line-height: 24px;
              text-align: left;
              font-style: normal;
              text-transform: none;
              overflow: auto;
            }
          }
          .culture-container{
            width: 483px;
            height: 144px;
            font-weight: 400;
            font-size: 14px;
            color: #9B6548;
            line-height: 24px;
            text-align: left;
            font-style: normal;
            text-transform: none;

          }
          .left-container{
            color: #9B6548;
            .left-container-box{
              display: flex;
              align-items: center;
              overflow: auto;
              .right-container-title{
                font-family: DingliesongtypefaceRegular;
                width: 64px;
                height: 22px;
                font-weight: 400;
                font-size: 32px;
                color: #9B6548;
                line-height: 22px;
                text-align: center;
                font-style: normal;
                text-transform: none;
              }
            }
          }
        }
        .culture-center{
          display: flex;
          align-items: center;
          justify-content: center;
          .culture-container{
            width: 160px;
            height: 110px;
            border-radius: 0px 0px 0px 0px;
            background-image: url("@/assets/images/notLoggedIn/button_white.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            display: flex;
            align-items: center;
            justify-content: center;
.culture-container-title{
  font-family: DingliesongtypefaceRegular;
  font-weight: 400;
  font-size: 20px;
  color: #FFFFFF;
  text-align: center;
  font-style: normal;
  text-transform: none;
  width: 40px;
  height: 40px;

}

          }

        }
        //移入
        .culture-center:hover{
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          .culture-container{
            width: 160px;
            height: 110px;
            border-radius: 0px 0px 0px 0px;
            background-image: url("@/assets/images/notLoggedIn/button_black.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            .culture-container-title{
              font-family: DingliesongtypefaceRegular;
              font-weight: 400;
              font-size: 20px;
              color: #FFFFFF;
              text-align: center;
              font-style: normal;
              text-transform: none;
              width: 40px;
              height: 40px;

            }

          }
        }
        .culture-right{
          //margin-left: 40px;
          width: 499px;
          height: 100%;
          background-image: url("@/assets/images/notLoggedIn/frame@2x.png");
          background-repeat: no-repeat;
          background-size: 100% 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          .culture-container-title{
            font-family: DingliesongtypefaceRegular;
            font-weight: 400;
            font-size: 16px;
            color: #9B6548;
            text-align: left;
            font-style: normal;
            text-transform: none;
            margin-left: 20px;
            margin-bottom: 10px;
          }
          .culture-container-video{
            display: flex;
            align-items: center;
            justify-content: center;
            width: 483px;
            height: 144px;
            font-weight: 400;
            font-size: 20px;
            color: #9B6548;
            line-height: 24px;
            text-align: left;
            font-style: normal;
            text-transform: none;
            overflow: auto;
          }
        }
      }

    }

  }
}
.tip-title{
  font-family: DingliesongtypefaceRegular;
  font-weight: 400;
  font-size: 16px;
  color: #9B6548;
  text-align: left;
}
.tip-content{
  width: 254px;
  height: 334px;
  font-family: DingliesongtypefaceRegular;
  font-weight: 400;
  font-size: 14px;
  color: #9B6548;
  display: flex;
  align-items: center;
  justify-content: center;
  .tip-content-container{
    //border: 1px solid red;
    width: 194px;
    height: 248px;
    .tip-content-item{
      cursor: pointer;
      width: 194px;
      height: 38px;
      margin-bottom: 40px;
      .tip-content-item-title{
        font-family: DingliesongtypefaceRegular;
        font-weight: 400;
        font-size: 16px;
        color: #9B6548;
        text-align: center;
        font-style: normal;
        text-transform: none;
        line-height: 38px;
      }
      .active-tip-content-item-title{
        width: 194px;
        height: 38px;
        border-radius: 6px 6px 6px 6px;
        font-family: DingliesongtypefaceRegular;
        font-weight: 400;
        font-size: 16px;
        color: #FFFFFF;
        text-align: center;
        font-style: normal;
        text-transform: none;
        line-height: 38px;
        background: linear-gradient( 180deg, #B36930 0%, #F1C08C 100%);
      }
    }

  }
}
.button-groups{
  display: flex;
  justify-content: center;
  .button-default{
    cursor: pointer;
    width: 70px;
    height: 32px;
    background: linear-gradient( 180deg, #B36930 0%, #F1C08C 100%);
    border-radius: 6px 6px 6px 6px;
    font-family: DingliesongtypefaceRegular;
    font-weight: 400;
    font-size: 14px;
    color: #FFFFFF;
    line-height: 32px;
    text-align: center;
    font-style: normal;
    text-transform: none;
  }
  .button-right{
    margin-left: 30px;
  }
}
:deep(.el-dialog){
  background-image: url("@/assets/images/notLoggedIn/detail_back.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;

}
.single-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
   border-radius: 6px;
   cursor: v-bind(cursorName);
   position: relative;
   overflow: hidden;
   transition: var(--el-transition-duration-fast);
}

.single-uploader .el-upload:hover {
   border-color: var(--el-color-primary);
}

.el-icon.single-uploader-icon {
   font-size: 28px;
   color: #8c939d;
   width: 178px;
   height: 178px;
   text-align: center;
}
</style>
<style>
@import "@/assets/main.scss";
</style>